<template>
  <div>
    <p class="jinCheng_p1">这里记录了项目发起人更新的项目进展，您可以提问了解更多项目相关细节。</p>
    <div class="jinCheng_head"><img src="https://i.jd.com/commons/img/no-img_mid_.jpg" alt=""><span>{{title}}</span></div>
    <div class="jinCheng_title" v-for="(item,index) in problem" :key="index">
      <span class="jinCheng_span1">{{item.time}}</span>
      <span class="jinCheng_dian"></span>
      <span class="jinCenng_content">{{item.title}}</span>
    </div>
    <div class="Left_nav ">
      <div class="nav-warp container">
        <div class="nav_title" 
        v-for="(item,index) in navs" :key="item.title"
        @click="itemClick(index)">
          <div :class="{'item-child':true ,'active':activeIndex=== index} ">
            {{item.title}}
          </div>
        </div>
      </div>
    </div>
    <div class="left_content" v-show="isShow===0" id="tiWen">
        <div class="answer_bg"></div>
        <hr>
        <div class="title_box">
          <p class="answer_p1">有什么疑问想告诉项目发起人？</p>
          <div contenteditable="true" class="text_content" id="text"></div>
          <p class="answer_p2">电话：<input type="text" class="answer_phone" v-model="phone">问题一经采纳，我们会第一时间短信通知<span class="answer_span"><Button class="answer_btn" @click="tiJiao">提交</Button></span></p>
        </div>
        <Answer/>
    </div>
    <div class="left_content" v-show="isShow===1" style="padding-bottom: 4vw;">
        <p class="left_pp">是否要发起众筹？</p>
        <p><Button class="left_pbtn" @click="toZ">是</Button></p>
    </div>
  </div>
</template>

<script>
import {getDetail} from '../../../../../../../../server/getDetail'
import Answer from './comps/Answer/Answer'
export default {
  components: {
    Answer,
  },
  data() {
    return {
      title:"OFF-WINE 以醉之酩冰淇淋，甄选世界原酒名浆与法式手工冰淇淋融合，打造跨界新物种! ",
       navs: [
        {
          title: '项目答疑',
        },
        {
          title: '发起众筹',
        },
      ],
      activeIndex:0,
      isShow:0,
      problem : [
        {
          time:'2020-06-28',
          title:'项目已经在京东众筹平台预热了，众筹时间为2020/6/309:00:00，为期30天，欢迎各位朋友点击链接关注支持，名额有限，欲购从速哦！',
        },
      ],
      phone:'',
    }
  },
  methods: {
    itemClick(i){
      this.activeIndex = i;
      this.isShow = i;
    },
    tiJiao() {
      var text = document.getElementById('text').innerText;
      if(this.$store.state.user.isLogin){
        if(text==null || text == ''){
          this.$Message.error('不能为空');
        }else{
          var data = {
            'gid':this.$route.query.gid,
            'text':text,
            'phone':this.phone,
          }
        getDetail('index/Getdetailitem/tiWen',data).then(res=>{
          if(res.err_code!=undefined){
            if(res.err_code==1000){
              getDetail('index/Getdetailitem/jinCheng',data).then(res=>{
                if(res.err_code!=undefined){
                  if(res.err_code==1000){
                    this.title = res.data[0];
                    this.problem = res.data[1];
                    this.phone = '';
                    text = '';
                  }
                }
              })
              this.$Message.success(res.message);
            }else{
              this.$Message.error(res.message);
            }
          }
        })
        }
      }else{
        this.$Message.error('请先登录');
      }
    },
    toZ() {
      this.$router.push({path:'sponsor'});
    },
  },
  created() {
    var data = {
      'gid':this.$route.query.gid,
    };

    getDetail('index/Getdetailitem/jinCheng',data).then(res=>{
      if(res.err_code!=undefined){
        if(res.err_code==1000){
          this.title = res.data[0];
          this.problem = res.data[1];
        }
      }
    })

  },
}
</script>

<style scoped>
.jinCheng_p1{
  text-align: center;
  margin: 1vw;
  padding-top:1vw;
}
.jinCheng_head span{
    position: relative;
    top: -2vw;
    left: 0.7vw;
    color: black;
}
.jinCheng_head img{
  border-radius:50%;
  margin-left: 2vw;
  width: 5vw;
}
.tiWen_btn{
  position: relative;
  left: 33vw;
  width: 11vw;
  height: 3vw;
  margin-bottom: 1vw;
}
.jinCheng_title{
    height: 5vw;
    border-left: 1px solid rgb(165, 162, 162);
    margin-left: 9vw;
    position: relative;
    padding-left: 1vw;
}
.jinCheng_span1{
    position: absolute;
    left: -6vw;
    top: 1.7vw;
    color:rgb(165, 162, 162);
}
.jinCheng_dian{
  border: 2px solid #0AE4B3;
  width: 0.8vw;
  height: 0.8vw;
  display: inline-block;
  border-radius: 50%;
  position: absolute;
  left: -0.47vw;
  top: 1.96vw;
  background-color: white;
}
.jinCenng_content{
  position: relative;
  top: 2vw;
}
.Left_nav {
  height: 60px;
  border-bottom: 1px solid #e6e6e6;
  margin-top: 1vw;
}
.nav-warp {
  display: flex;
  height: 100%;
}
.nav_title {
  height: 100%;
  width: 100px;

  position: relative;
}
.item-child {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  position: absolute;
  left: 0;
  top: 1px;
}
.item-child:hover {
  color: var(--color-main);
  border-color: var(--color-main);
  background-color: #f9f9f9;
  box-shadow: 0px 1px 5px #e6e6e6;
}
.active {
  color: var(--color-main);
  border-color: var(--color-main);
  /* box-shadow: 0px 1px 5px #e6e6e6; */
}
.problem_box{
    text-align: center;
    height: 11vw;
    line-height: 11vw;
}
.answer_bg{
    background-image: url('https://static.360buyimg.com/finance/crowdfunding/details/2.0.0/css/i/zc-noAnswer.jpg');
    height: 22vw;
    background-repeat: no-repeat;
    background-position: 13vw 2vw;
  }
  .answer_box{
    padding-bottom: 3vw;
  }
  .answer_box hr{
    margin-left: 2vw;
    margin-right: 2vw;
  }
  .title_box{
    padding-left: 2vw;
    padding-right: 2vw;
    margin-top: 1vw;
  }
  .answer_p1{
    font-size: 1.4vw;
    font-family: 楷体;
  }
.text_content{
    border: 1px solid;
    height: 9vw
}
.answer_p2{
  margin-top: 1vw;
}
.answer_phone{
  border: 1px solid white;
  border-bottom-color: black;
  margin-right: 1vw;
}
.answer_span{
  float: right;
}
.answer_btn{
  width: 9vw;
  height: 2vw;
  margin-left: 0.4vw;
  position: relative;
  top: -0.2vw;
  background-color: #00D9A6;
}
.left_pp{
      text-align: center;
    margin-top: 1vw;
    font-size: 2vw;
    margin-bottom: 1vw;
}
.left_pbtn{
      float: right;
    margin-right: 9vw;
}
</style>